<div class="outstock">
    <div *ngIf="step1">
        <div style="padding:10px">
            <button nz-button nzType="primary" (click)="pos()"><i nz-icon nzType="form" nzTheme="outline"></i>
                提交</button>
            <button nz-button nzType="default" (click)="app()"><i nz-icon nzType="pic-left" nzTheme="outline"></i>
                申请</button>
            <nz-select style="width: 120px;margin-left:10px;" [(ngModel)]="selectedValue"
                (ngModelChange)="selectChange($event)">
                <nz-option nzValue="" nzLabel="全部"></nz-option>
                <nz-option nzValue="0" nzLabel="修改中"></nz-option>
                <nz-option nzValue="1" nzLabel="已申请"></nz-option>
                <nz-option nzValue="2" nzLabel="已出库"></nz-option>
                <nz-option nzValue="3" nzLabel="已驳回"></nz-option>
            </nz-select>
        </div>
        <div style="padding:10px">
            <nz-table nzSize="small" nzBordered #basicTable [nzData]="dataSet" [nzScroll]="{ y: '400px' }" [nzLoadingDelay]="1000"
                [nzHideOnSinglePage]="true" (nzCurrentPageDataChange)="currentPageDataChange($event)"
                (nzPageIndexChange)="refreshStatus()" (nzPageSizeChange)="refreshStatus()">
                <thead>
                    <tr>
                        <th nzWidth="50px" nzAlign="center" nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate"
                            (nzCheckedChange)="checkAll($event)"></th>
                        <th nzWidth="100px" nzAlign="center">序号</th>
                        <th nzWidth="150px" nzAlign="center">申请日期</th>
                        <th nzWidth="100px" nzAlign="center">申请总价 <span style="color:#ccc;font-size:12px;">/元</span></th>
                        <th nzWidth="100px" nzAlign="center">申请状态</th>
                        <th nzWidth="100px" nzAlign="center">审批人</th>
                        <th nzWidth="150px" nzAlign="center">审批时间</th>
                        <th nzAlign="center">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of basicTable.data;index as i">
                        <td nzShowCheckbox [nzDisabled]="data.disabled" [(nzChecked)]="data.checked"
                            (nzCheckedChange)="refreshStatus()"></td>
                        <td nzAlign="center">{{data.num}}</td>
                        <td>{{data.sdate}}</td>
                        <td>{{data.total}}</td>
                        <td nzAlign="center">
                            <span *ngIf="data.status == 0" style="color:#ff0000">修改中</span>
                            <span *ngIf="data.status == 1" style="color:#17e317">已申请</span>
                            <span *ngIf="data.status == 2" style="color:#f0b736">已出库</span>
                            <span *ngIf="data.status == 3" style="color:#3676f0">已驳回</span>
                        </td>
                        <td>{{data.name}}</td>
                        <td nzAlign="center">{{data.edate}}</td>
                        <td nzAlign="center">
                            <div *ngIf="data.status == 0 || data.status == 3;else anothericon">
                                <button nz-button nzType="default" (click)="opera(i,'edit')"><i nz-icon
                                        nzType="file-text" nzTheme="outline"></i>
                                    修改</button>
                                <!-- <button nz-button nzType="default"><i nz-icon nzType="close-circle" nzTheme="outline"></i>
                                    删除</button> -->
                            </div>
                            <ng-template #anothericon>
                                <button nz-button nzType="default" (click)="opera(i,'view')"><i nz-icon nzType="search"
                                        nzTheme="outline"></i>
                                    查看</button>
                            </ng-template>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
    </div>

    <div *ngIf="step2">
        <div style="padding:10px">
            <button *ngIf="ifMaterial" nz-button nzType="primary" (click)="material()"><i nz-icon nzType="appstore"
                    nzTheme="outline"></i>
                选择物资分类</button>
            <button nz-button nzType="default" (click)="backPage1()"><i nz-icon nzType="left" nzTheme="outline"></i>
                返回上一页</button>
        </div>
        <div style="padding:10px">
            <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
                <ng-template #addOnBeforeTemplate>
                    你已选择：
                </ng-template>
                <input value="{{ treeTitle }}" nz-input readonly>
            </nz-input-group>
        </div>
        <div style="padding:10px">
            <nz-table nzSize="small" nzBordered #basicTable2 [nzData]="dataSet2" [nzScroll]="{ y: '400px' }"
                [nzLoadingDelay]="1000" [nzHideOnSinglePage]="true" [nzFrontPagination]="false"
                [nzShowPagination]="false">
                <thead>
                    <tr>
                        <th nzAlign="center" nzWidth="50px">序号</th>
                        <th nzAlign="center" nzWidth="110px">所属仓库</th>
                        <th nzAlign="center" nzWidth="110px">物资批次</th>
                        <th nzAlign="center" nzWidth="110px">物资价格 <span style="color:#ccc;font-size:12px;">/元</span>
                        </th>
                        <th nzAlign="center" nzWidth="110px">物资类型</th>
                        <th nzAlign="center">入库时间</th>
                        <th nzAlign="center" nzWidth="100px">入库类型</th>
                        <th nzAlign="center" nzWidth="100px">可领数量 <span style="color:#ccc;font-size:12px;">/个</span>
                        </th>
                        <th nzAlign="center" nzWidth="100px">领用数量 <span style="color:#ccc;font-size:12px;">/个</span>
                        </th>
                        <th nzAlign="center" nzWidth="80px">小计 <span style="color:#ccc;font-size:12px;">/元</span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of basicTable2.data;index as i">
                        <td nzAlign="center">{{data.num}}</td>
                        <td>{{data.house}}</td>
                        <td>{{data.batch}}</td>
                        <td>￥{{data.price}}</td>
                        <td>{{data.type}}</td>
                        <td nzAlign="center">{{data.time}}</td>
                        <td>{{data.class}}</td>
                        <td nzAlign="center">{{data.numk}}</td>
                        <td nzAlign="center">
                            <div *ngIf="ifFormatNum">
                                <nz-input-number (ngModelChange)="formatNum(i)" [(ngModel)]="data.numl" [nzMin]="0"
                                    [nzMax]="data.numk" [nzStep]="1"></nz-input-number>
                            </div>
                            <div *ngIf="!ifFormatNum">
                                {{data.numl}}
                            </div>
                        </td>
                        <td>￥{{data.total}}</td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
        <div style="padding:10px;">
            <div nz-row nzGutter="16">
                <div nz-col nzSpan="8">
                    出库时间：
                    <span *ngIf="ifOutTimePost">
                        <nz-date-picker [(ngModel)]="outTimePost" (ngModelChange)="datepickerChange($event)">
                        </nz-date-picker>
                    </span>
                    <span *ngIf="!ifOutTimePost">
                        {{outTimeString}}
                    </span>
                </div>
                <div nz-col nzSpan="8">
                    使用人：
                    <span *ngIf="ifUseManPost">
                        <input style="width:200px" [(ngModel)]="useManPost" nz-input placeholder="请输入...">
                    </span>
                    <span *ngIf="!ifUseManPost">
                        {{useManPost}}
                    </span>
                </div>
                <div nz-col nzSpan="8">
                    出库类型：
                    <span *ngIf="ifOutTypePost">
                        <input style="width:200px" [(ngModel)]="outTypePost" nz-input placeholder="请输入...">
                    </span>
                    <span *ngIf="!ifOutTypePost">
                        {{outTypePost}}
                    </span>
                </div>
            </div>
        </div>
        <div style="padding:10px;text-align:center;">
            <span *ngIf="ifPostButton">
                <button nz-button nzType="primary" [disabled]="postButton" (click)="postData()"><i nz-icon nzType="form"
                        nzTheme="outline"></i> 确认提交</button>
            </span>
            <span style="margin-left:20px;color:#ff0000;font-size:16px;font-weight:bold;">{{ allTotal }}</span>
        </div>
    </div>

    <nz-modal [(nzVisible)]="isVisible" nzTitle="选择物资分类" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
        [nzOkLoading]="isOkLoading">
        <div>
            <nz-tree [nzData]="treeNode" nzCheckable="true" nzMultiple="true" [nzCheckedKeys]="defaultCheckedKeys"
                (nzExpandChange)="nzEvent($event)" (nzCheckBoxChange)="nzEvent($event)">
            </nz-tree>
        </div>
    </nz-modal>
</div>